<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px; padding:0px;}
li{width:220px; height:220px; list-style:none; margin-right:20px}
.box{width:100%; height:100%; background:url(2.jpg); border-radius:50%; box-shadow:inset 0 0 0 0 rgba(153,0,0,0), inset 0 0 0 16px rgba(204,204,204,0.6); transition:all 400ms ease-in-out}
.txt{color:white; transform:scale(0); transition:all 400ms ease-in-out; width:100%; height:100%;}
.txt h3{text-align:center;width:60%; margin:0 auto; padding-top:70px;} 
.txt p{text-align:center; padding-top:20px;}
.box:hover{ box-shadow:inset 0 0 0 110px rgba(153,0,0,0.6),inset 0 0 0 16px rgba(204,204,204,0) }
.box:hover .txt{transform:scale(1)}

</style>
</head>

<body>
<ul id="plist">
	<li>
    	<div class="box">
        	<div class="txt">
            	<h3>ChenJiang</h3>
                <p>这是一个效果</p>
            </div>
        </div>
    </li>
</ul>
</body>
</html>
